<template>
  <div>
    <el-container>
      <el-main>
        <el-row type="flex" justify="center" align="middle" class="register-form-container">
          <el-col :span="12">
            <el-card>
              <h1 class="title blue" style="font-size: 240%">用户注册</h1>
              <el-form :model="registerForm" :rules="rules" ref="register" label-width="120px">
                <el-form-item label="用户名" prop="UserName">
                  <el-input v-model="registerForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="UserPassword">
                  <el-input type="password" v-model="registerForm.userPassword"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="UserCardNo">
                  <el-input v-model="registerForm.userCardNo"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="UserTel">
                  <el-input v-model="registerForm.userTel"></el-input>
                </el-form-item>
                <el-form-item label="住址" prop="UserAddress">
                  <el-input type="textarea" v-model="registerForm.userAddress"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码" prop="UserPostNumber">
                  <el-input v-model="registerForm.userPostNumber"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                  <el-row>
                    <el-col :span="12">
                      <el-input v-model="registerForm.captcha"></el-input>
                    </el-col>
                    <el-col :span="8">
                      <div style="flex: 1; height: 36px">
                        <valid-code @update:value="getCode" />
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <el-link>看不清</el-link>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item prop="agreement" style="text-align: left">
                  <el-checkbox v-model="registerForm.agreement">
                    我同意<el-link type="primary">《服务条款》</el-link>
                  </el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleRegister">立即注册</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ValidCode from "@/components/ValidCode.vue";

export default {
  name: 'Register',
  components: { ValidCode },
  data() {
    const validateCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else if (value.toLowerCase() !== this.code) {
        callback(new Error('验证码错误'));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        userName: '',
        userPassword: '',
        userCardNo: '',
        userTel: '',
        userAddress: '',
        userPostNumber: '',
        captcha: '',
        agreement: false,
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 6, message: '用户名要求不低于6个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码要求不低于6个字符', trigger: 'blur' }
        ],
        userCardNo: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ],
        userTel: [
          { required: true, message: '请输入电话号码', trigger: 'blur' }
        ],
        captcha: [
          { validator: validateCode, trigger: 'blur' }
        ],
        agreement: [
          { required: true, message: '请同意服务条款', trigger: 'change' }
        ]
      },
    };
  },
  methods: {
    getCode(code) {
      this.code = code.toLowerCase();
    },
    handleRegister() {
      this.$refs['register'].validate((valid) => {
        if (valid) {
          JSON.stringify(this.registerForm)
          // 发送请求
          this.$request.post('/register', this.registerForm).then(res => {
            if(res.code === '200') {
              this.$router.push('/')
              this.$message.success('注册成功')
            } else {
              this.$message.error(res.msg);
            }
          })
        }
      });
    }
  }
};
</script>

<style scoped>
.register-form-container {
  padding: 20px;
  margin-top: 30px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.red {
  color: red;
  font-size: 12px;
}

.el-link {
  margin-left: 5px;
}

.el-button {
  width: 100%;
}
</style>